<template>
  <div id="loginContain">
    <div class="weui-cells__title">微信公众号调试系统</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">登录名</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" v-model="loginInfo.username" placeholder="请输入登录名"/>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="password" @keyup.enter="login" pattern="[0-9]*" v-model="loginInfo.password" placeholder="请输入密码"/>
        </div>
      </div>
    </div>


    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" @click="login()" href="javascript:" id="showTooltips">登录</a>
    </div>
  </div>



</template>

<script>
  export default {
    data: function () {
      return {
        loginInfo: {
          username: 'admin',
          password: '123456'
        }
      }
    },
    mounted: function() {
      $('#loginContain').animateCss('bounceInRight', function() {
        // Do somthing after animation
      });
    },
    created: function () {

    },
    methods: {
      login() {
        if(this.loginInfo.username === '') {
          weui.topTips('请输入登录名',{
            className: 'topTipsStype'
          });
          return;
        }
        if(this.loginInfo.password === '') {
          weui.topTips('请输入密码',{
            className: 'topTipsStype'
          });
          return;
        }
        let that = this;
        this.axios.post('wx_gateway/debugging/v1/login',this.loginInfo).then((res) =>{
          // 登录时候把登录名存起来
          localStorage.setItem('username',that.loginInfo.username);
          setTimeout(function () {
            that.$router.push('/list')
          },500);

          $('#loginContain').animateCss('bounceOutLeft', function() {
            // Do somthing after animation
          });
        }).catch((err) =>{
          weui.topTips(err.response.data.errorMessage,{
            className: 'topTipsStype'
          })
        });
      }

    }
  }
</script>

<style scoped>
  .weui-cells__title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .weui-cells_form {
    margin: 30px 15px 0;
    border: 1px solid #666;
    border-radius: 10px;
  }

</style>
